<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<style type="text/css">
			#show {
				width: 400px;
				float: left;
				margin-right: 30px;
			}
			
			#show>img {
				width: 100%;
			}
			
			#main {
				width: 600px;
				height: 600px;
				border: 1px solid;
				box-sizing: border-box;
				float: left;
				margin-top: 60px;
				margin-left: 100px;
			}
			
			#main div {
				box-sizing: border-box;
				float: left;
				width: 33.333%;
				height: 33.333%;
				border: 1px solid white;
				background-image: url(img/2.jpg);
			}
			#game {
				width: 315px;
				height: 193px;
				background-image: url(img/游戏结束了.png);
				position: absolute;
				left: 50%;
				top: 50%;
				text-align: center;
				margin-left: -157px;
				margin-top: -97px;
				display: none;
				z-index: 1000;
			}
			
			#game>p {
				margin-top: 80px;
				font-size: 30px;
				color: darkgreen;
				font-weight: bold;
			}
			
			#game #btn {
				width: 100px;
				height: 30px;
				/*background-color: #D2691E;*/
				border: 0px solid;
				float: right;
				margin-right: 30px;
				margin-top: 10px;
				line-height: 30px;
				font-weight: bold;
			}
			
			#game #btn:hover {
				cursor: pointer;
				background-color: #006400;
				color: white;
			}
			#time{
				position: absolute;
				margin-left: 50%;
			}
		</style>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>
	</head>

	<body>
		<div id="show">
			<img src="img/2.jpg" />
			<input type="button" name="" id="" value="上一级" onclick="del()" />
			<input type="button" name="" id="" value="下一级" onclick="add()" />
		</div>
		<div id="game">
			<p>恭喜过关!</p>
			<div id="btn" onclick="nextgame()">
				下一关
			</div>
		</div>
		<div id="main" class="row">
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"></div>
		</div>
		<div id="time">
			剩余时间：<span>60</span>秒
		</div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var rownum = 3
			var index = 0;
			var change = [];
			var imgarr = [];
			var movediv;
			var imgshow = document.getElementById("show").children[0];
			var game = document.getElementById("game");
			var divs = document.getElementById("main").children;
			var time = document.getElementById("time");
			var tt, mytime = 60;
			var showtime;
			start();
			function settime() {
				tt = mytime;
				showtime = setInterval(function() {
					if(tt == 0) {
						clearInterval(showtime);
						game.style.display = "block";
						game.children[0].innerHTML = "好可惜~~失败了"
						game.children[1].innerHTML = "再来一次";
					} else {
						tt--;
						time.children[0].innerHTML = tt;
					}
				}, 1000);
			}

			function nextgame() {
				if(game.children[1].innerHTML == "再来一次") {
					creatdiv();
					start();
					game.style.display = "none";
				} else {
					add();
					game.style.display = "none";
				}

			}

			function add() {
				clearInterval(showtime);
				mytime += mytime;
				rownum++;
				creatdiv();
				start();
			}

			function del() {
				clearInterval(showtime);
				rownum--;
				mytime -= mytime;
				creatdiv();
				start();
			}

			function creatdiv() {
				if(rownum < 3) {
					alert("等级已是最低");
				} else {
					var a = parseInt(Math.random() * 10 + 1);
					var src = "img/" + a + ".jpg"
					imgshow.src = src;
					var div = document.getElementById("main");
					div.innerHTML = ""
					for(var i = 0; i < rownum * rownum; i++) {
						var dd = document.createElement("div");
						dd.style.backgroundImage = "url("+src+")";
						dd.style.width = 1 / rownum * 100 + "%";
						dd.style.height = 1 / rownum * 100 + "%";
						div.appendChild(dd);
					}
				}
			}
			function start() {
				index = 0;
				change = [];
				imgarr = [];
				divs = document.getElementById("main").children;
				for(var i = 0; i < rownum; i++) {
					imgarr[i] = [];
					for(var j = 0; j < rownum; j++) {
						var x = -600 / rownum * j + "px";
						var y = -600 / rownum * i + "px";
						//divs[index].style.backgroundPosition=x+ " "+y;
						imgarr[i][j] = { vx: parseInt(x), vy: parseInt(y) };
						change[index] = { vx: x, vy: y };
						index++;
					}
				}
				change.sort(function() {
					return Math.random() > 0.5 ? 1 : -1;
				});
				for(var i = 0; i < change.length; i++) {
					divs[i].draggable = "true";
					divs[i].style.backgroundPosition = change[i].vx + " " + change[i].vy;
					divs[i].ondragstart = function(e) {
						movediv = e.target;
					}
					divs[i].ondragenter = function() { return false; }
					divs[i].ondragover = function() { return false; }
					divs[i].ondrop = function(e) {
						e.stopPropagation();
						e.preventDefault();
						var t = e.target.style.backgroundPosition
						e.target.style.backgroundPosition = movediv.style.backgroundPosition;
						movediv.style.backgroundPosition = t;
						yanzheng();
					}
				}
				settime();
			}

			function yanzheng() {
				var count = 0;
				var index = 0;
				var dd = document.getElementById("main").children;
				for(var m = 0; m < imgarr.length; m++) {
					for(var n = 0; n < imgarr[m].length; n++) {
						var x = parseInt(dd[index].style.backgroundPositionX);
						var y = parseInt(dd[index].style.backgroundPositionY);
						if(imgarr[m][n].vx == x && imgarr[m][n].vy == y) {
							count++;
						}
						index++;
						if(count == rownum*rownum) {
							console.log("过关");
							game.children[0].innerHTML = "恭喜过关！"
							game.children[1].innerHTML = "下一关";
							game.style.display = "block";
						}
					}
				}
			}
		</script>
	</body>

</html>